<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            position: absolute;
            top: 50px;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button type="button" class="btn800">
        按下按钮开始移动到800
    </button>
    <button type="button" class="btn500">
        按下按钮开始移动到500
    </button>
    <div>
    </div>
    <script type="text/javascript">
        var div = document.querySelector('div');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                //这里在进位时 负数应该往小取 整数应该往大取
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    console.log(12, typeof callback == 'function');
                    typeof callback == 'function' && callback.call(obj)

                }
                //这里会产生小数，所以最后移动到的并不是实际我们想要的位置，有一点小的偏差 因此在上边我们对其进行取整
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);

        }
        div.addEventListener('click',function (params) {
            animate(div,0)
        })
        btn500.addEventListener('click', function () {
            animate(div, 500, function (params) {
                this.style.backgroundColor = 'red' 
            });
        });
        btn800.addEventListener('click', function () {
            animate(div, 800, function (params) {
                this.style.backgroundColor = 'yellow' 
            });
        });
			//匀速动画就是 盒子是当前的位置 +固定的值 10
			//缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
    </script>
</body>

</html>